import { GameStatus } from "../Enum";
import { Game } from "../Game";
import { SquareGroup } from "../SquareGroup";
import { GameViewer } from "../Type";
import { nextTetrisTipBoxConf } from "../config/nextTetrisTipBoxConf";
import panelConf from "../config/panelConf";
import { SquareShowPage } from "./SquareShowPage";
import { squareSize } from "./config/squareSize";
import $ from "jquery";

export class GameShowPage implements GameViewer {
  private _markDom?: JQuery<HTMLElement>;

  constructor(private _panelContainer: JQuery<HTMLElement>, private _tipContainer: JQuery<HTMLElement>, private _scoreDom: JQuery<HTMLElement>) {}
  onStart(): void {
    this._hideMark();
  }
  onPause(): void {
    console.log("暂停游戏");
    this._createMark("暂停");
  }
  onOver(): void {
    this._createMark("游戏结束");
  }
  onScore(score: number): void {
    $(this._scoreDom).text(score);
  }

  showNextTetris(tetris: SquareGroup): void {
    tetris.squares.forEach((sq) => {
      sq.viewer = new SquareShowPage(sq, this._tipContainer);
    });
  }
  removeNextTetris(nextTetris: SquareGroup): void {
    nextTetris.squares.forEach((sq) => sq.viewer?.remove());
  }
  showCurTetris(tetris: SquareGroup): void {
    tetris.squares.forEach((sq) => {
      sq.viewer = new SquareShowPage(sq, this._panelContainer);
    });
  }

  init(game: Game): void {
    // 设置游戏面板尺寸
    $(this._panelContainer).css({ width: panelConf.width * squareSize.width, height: panelConf.height * squareSize.height });
    // 设置提示框尺寸
    $(this._tipContainer).css({ width: nextTetrisTipBoxConf.width * squareSize.width, height: nextTetrisTipBoxConf.height * squareSize.height });

    // 初始化事件
    this.initEvent(game);

    this._createMark("按下空格即可开始游戏");
  }

  private initEvent(game: Game): void {
    // 键盘操作事件
    $(document).on("keydown", function (e) {
      switch (e.key) {
        case " ": {
          if (game.gameStatus !== GameStatus.payling) {
            game.start();
          } else {
            game.pauseGame();
          }
          break;
        }
        case "ArrowUp": {
          game.rotate();
          break;
        }
        case "ArrowRight": {
          game.toRight();
          break;
        }
        case "ArrowDown": {
          game.toBottom();
          break;
        }
        case "ArrowLeft": {
          game.toLeft();
          break;
        }
      }
    });
  }

  // 显示蒙版
  private _createMark(text: string): void {
    if (!this._markDom) {
      const div = $("<div>").css({
        width: "100%",
        height: "100%",
        textAlign: "center",
        backgroundColor: "rgba(0, 0, 0, 0.3)",
        position: "absolute",
        left: 0,
        right: 0,
        color: "#fff",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontSize: "20px",
        zIndex: 999,
      });
      this._panelContainer.append(div);
      this._markDom = div;
    } else {
      this._markDom.css({ display: "flex" });
    }
    this._markDom.text(text);
  }

  /**
   * 隐藏蒙版
   */
  private _hideMark(): void {
    if (this._markDom) {
      this._markDom.css({ display: "none" });
    }
  }
}
